<template>
	<view class="pageBox">
		<uni-nav-bar height="88rpx" fixed title="我的活动" color="#000000" :border="false" left-icon="left"
			@clickLeft="$back" statusBar>
		</uni-nav-bar>
		<view class="navbar-fixed">
			<view class="tabsBG">
				<u-tabs lineHeight="4rpx" :list="tabs" keyName="name" :itemStyle="tabsStyle" :activeStyle="tabsAStyle"
					lineColor="#6FA9FF" :current="tabIndex" @change="tabsChange"></u-tabs>
			</view>
		</view>
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<!-- <mescroll-body :sticky="true" ref="mescrollRef" :top="mescroll_top" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption">
			<view class="integralRecordContentBox">
				<view class="integralRecordRow" v-for="(item,index) in dataList.rows" :key="index"
					@click="goto('activity/activityInfo/activityInfo',{id:item.activityId})">
					<view class="row">
						<view class="title u-line-2">{{item.activityName||item.apmActivity.activityName}}</view>
						<view class="statusBtn" v-if="item.isPass" :class="statusClass[item.isPass]">
							{{dicts.approval_status[item.isPass]}}
						</view>
					</view>
					<view class="row">
						<view class="text">{{item.activityScore||item.apmActivity.activityScore}}积分</view>
						<view class="time">{{item.participationTime||item.createTime}}</view>
					</view>

				</view>
			</view>

		</mescroll-body> -->
		<mescroll-body :sticky="true" ref="mescrollRef" :top="mescroll_top" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption">
			<view class="integralRecordContentBox">
				<view class="integralRecordRow flex-column" v-for="(item,index) in dataList.rows" :key="index"
					@click="goto('activity/activityInfo/activityInfo',{id:item.activityId})">
					<view class="flex-row">
						<view class="cloumnImg">
							<view :class="item.activityState == 2?'statusText2':'statusText1'">
								{{item.activityState == 2?'已结束':
									item.activityState == 1?'进行中':'报名中'}}
							</view>
							<imageSwiper :imgs="item.apmActivity.activityFile" class="img"></imageSwiper>
						</view>
						<view class="cloumnItem-left">
							<view class="cloumnTitle">
								<view class="title u-line-2">{{item.activityName||item.apmActivity.activityName}}</view>
							</view>
							<view class="cloumnTimeBox">
								<image src="@/static/common/timeIcon.png" class="cloumnTimeIcon"></image>
								<view class="time">{{item.participationTime||item.createTime}}</view>
							</view>
							<view class="cloumnTimeBox">
								<image src="@/static/activity/activityPlace.png" class="cloumnTimeIcon">
								</image>
								<view class="time">
									{{item.apmActivity.address||'无'}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex-between bottomBlock">
						<view class="cloumnIntegral flex-row flex-alignCenter" style="margin-top: ;">
							<image src="@/static/activity/activityScore.png" class="cloumnTimeIcon2">
							</image>
							{{item.activityScore||item.apmActivity.activityScore}}积分
						</view>
						<view class="statusBtn" v-if="item.isPass" :class="statusClass[item.isPass]">
							{{dicts.approval_status[item.isPass]}}
						</view>
						<!-- <view class="time">{{item.participationTime||item.createTime}}</view> -->
					</view>


				</view>
			</view>

		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
	import * as systemApi from "@/api/system.js"
	import {
		enrollListOfUser,
		activityListOfUser
	} from "@/api/activity.js"
	export default {
		mixins: [MescrollMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		// components: {
		// 	searchRow
		// },
		data() {
			return {
				statusClass: ['def', 'pass', 'fail'],
				tabsStyle: {
					width: '50%',
					height: '88rpx',
					boxSizing: 'border-box'
				},
				tabsAStyle: {
					color: '#6FA9FF'
				},
				tabs: [{
						name: '已报名 ',
						id: 1
					}
					// , {
					// 	name: '已打卡',
					// 	id: 0
					// },
				],
				tabIndex: 0,
				tabIndexOld: 0,
				options: {},
				mescroll_top: '88rpx',
				downOption: {
					auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 8 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '--这里是底线--',
					empty: {
						tip: '暂无' // 提示
					}
				},
				dataList: {
					records: [],
					rows: [],
					pages: 0,
					size: 0,
					total: 0,
					current: 0
				}, //列表数据
				listObj: {
					integralType: 0,
				},
				canReset: false,
				dicts: {
					approval_status: {},
					consumption_type: {}
				},
				dictList: {
					approval_status: [],
					consumption_type: []
				},
			}
		},
		mounted() {
			const that = this
			// // #ifdef MP
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		that.mescroll_top = 88 + 88 + res.statusBarHeight * 2 + 'rpx'
			// 	}
			// })
			// // #endif
		},
		onLoad(options) {
			this.options = options
			this.getDictDataList('approval_status')
		},
		onShow() {
			// that.canReset && that.getData()
			// that.canReset = true
		},
		methods: {
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = item.dictLabel
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			goto(url, data) {
				this.$navTo(`pages/${url}`, data)
			},
			//手动刷新
			getData() {
				let curMescroll = this.$refs.mescrollItem[0].mescroll
				curMescroll && curMescroll.resetUpScroll()
				curMescroll && curMescroll.scrollTo(0, 0)
			},
			tabsChange(e) {
				this.tabIndexOld = this.tabIndex
				this.tabIndex = e.index
				this.downCallback()
			},
			/*下拉刷新的回调 */
			downCallback(page) {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				const that = this
				if (that.$store.getters.token) {
					this.getDataList({
						pageNum: page.num,
						pageSize: page.size,

					}).then(list => {
						const curPageLen = list.rows.length
						const totalSize = list.total
						that.mescroll.endBySize(curPageLen, totalSize)
					}).catch(err => {
						that.mescroll.endErr()
					})
				} else {
					that.mescroll.endBySize(0, 0)
					return
				}
			},
			/**
			 * @param {Object} page 页码
			 */
			getDataList(pageObj) {
				console.log(pageObj);
				const that = this
				return new Promise((resolve, reject) => {
					if (this.tabIndex == 1) {
						activityListOfUser(pageObj).then((data) => {
							let dataList = JSON.parse(JSON.stringify(that.dataList))
							dataList.pageSize = pageObj.pageSize
							dataList.pageNum = pageObj.pageNum
							dataList.total = data.total
							dataList.pages = Math.ceil(data.total / dataList.pageSize)
							// 合并新数据
							const newList = data.rows
							// 如果是第一页需手动制空列表
							if (pageObj.pageNum == 1) dataList.rows = []
							// 合并新数据
							dataList.rows = dataList.rows.concat(newList)
							that.dataList = dataList
							resolve(that.dataList)
						}).catch(reject)
					} else {
						enrollListOfUser(pageObj).then((data) => {
							let dataList = JSON.parse(JSON.stringify(that.dataList))
							dataList.pageSize = pageObj.pageSize
							dataList.pageNum = pageObj.pageNum
							dataList.total = data.total
							dataList.pages = Math.ceil(data.total / dataList.pageSize)
							// 合并新数据
							const newList = data.rows
							// 如果是第一页需手动制空列表
							if (pageObj.pageNum == 1) dataList.rows = []
							// 合并新数据
							dataList.rows = dataList.rows.concat(newList)
							that.dataList = dataList
							resolve(that.dataList)
						}).catch(reject)

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$nav-height: 30px;



	.pageBox {
		.tabsBG {
			padding-left: 30rpx;
			background-color: #F4F7FF;
		}

		background-color: #F4F7FF;

		.integralRecordContentBox {
			padding: 30rpx;
		}

		.integralRecordRow {
			// height: 364rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;

			.bottomBlock {
				padding: 16rpx 0rpx 0 0;
				border-top: 1px solid #eee;
				margin-top: 28rpx;
				width: 100%;

				.cloumnIntegral {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-weight: normal;
					font-size: 13px;
					color: #FF7D00;
				}
				.cloumnTimeIcon2 {
					width: 36rpx;
					height: 36rpx;
					flex-shrink: 0;
					margin-right: 8rpx;
				}

			}

			.cloumnImg {
				position: relative;
				width: 165px;
				height: 123px;
				background-image: linear-gradient(#00F2FE, #4FACFE);
				border-radius: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 10px;
				flex-shrink: 0;
				overflow: hidden;
				border: 2px solid #00F2FE;

				.statusText1 {
					position: absolute;
					left: 0;
					top: 0;
					padding: 4px;
					background: #6FA9FF;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 12px;
					color: #FFFFFF;
					z-index: 1;
					border-radius: 0 0 5px 0;
				}

				.statusText2 {
					position: absolute;
					left: 0;
					top: 0;
					padding: 4px;
					background: #C9CDD4;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 12px;
					color: #FFFFFF;
					z-index: 1;
					border-radius: 0 0 5px 0;
				}
			}

			.cloumnTimeBox {
				display: flex;
				align-items: center;
				margin-top: 10px;
				margin-bottom: 10px;

				.cloumnTimeIcon {
					width: 17px;
					height: 17px;
					flex-shrink: 0;
					margin-right: 4px;
				}

				.cloumnTime {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #979797;
				}
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 700;
				font-size: 34rpx;
				color: #1D2129;
			}

			.statusBtn {
				padding: 6rpx 16rpx;
				flex-shrink: 0;
				background: #fff;
				border-radius: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #979797;
				// border: 2rpx solid #979797;

				&.def {
					color: #979797;
					border: 2rpx solid #979797;
				}

				&.fail {
					color: #F10707;
					border: 2rpx solid #F10707;
				}

				&.pass {
					color: #fff;
					background: #01E19B;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
				}

			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #F10707;
				flex-shrink: 0;
				margin-left: 20rpx;
			}

			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				text-align: right;
				margin-bottom: 10rpx;
			}

			.row {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 20rpx;
			}

			.orderStatus {
				margin-left: 20rpx;
				flex-shrink: 0;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
			}
		}
	}
</style>